<template>
  <div style="margin: 0px auto;width:70%;">

    <a-form :form="form" @submit="handleSubmit">
      <a-row>
        <a-col style="margin-top:80px;margin-bottom:30px;" :xs="{ span : 24 }" :sm="{ span:15 }" class="formGroupTitle">
          请填写以下信息，用于开通快捷支付</a-col>
      </a-row>
      <!-- <div>设置登录密码</div> -->
      <a-form-item v-bind="formItemLayout" style="margin-bottom:0px;" label="开户行">
        <p style="margin-bottom: 0;font-weight: 600;">{{ bankCard.bankname }}</p>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" style="margin-bottom:10px;" label="卡类型">
        <p style="margin-bottom: 0;font-weight: 600;">{{ bankCard.cardtype==1 ? '储蓄卡':'信用卡' }}</p>
      </a-form-item>
      <div>
        <a-form-item v-if='bankCard.cardtype==1' v-bind="formItemLayout" label="开户行所在地" required>
          <a-cascader v-decorator="['bankaddress ',{rules: [{ required: true, message: '请输入开户行所在地' }]}]"
            :options="options" @change="addressChange" @blur="addressBlur" placeholder="请选择开户行所在地"   />
        </a-form-item>
        <a-form-item v-if='bankCard.cardtype==1' v-bind="formItemLayout" label="支行名称">
          <div>
            <a-select showSearch @search="handleSearch" @change="handleVocationChange" ref="SelbankBranchName"
              v-decorator="[
                        'bankbranch',
                        {
                            rules: [{
                            required: true, message: '请选择支行名称',
                            }],
                        }
                        ]">
              <a-select-option v-for="d in bankBranchoptions" :key="d.label">{{d.label}}</a-select-option>
            </a-select>
          </div>
        </a-form-item>
      </div>

      <div>
        <a-form-item v-if='bankCard.cardtype!=1' v-bind="formItemLayout" label="cnv2">
          <a-input placeholder="卡背面后三位" v-decorator="[
                        'cvv', { rules: [{required: true, message: '请输入卡背面后三位!',}]}
                        ]" />
        </a-form-item>
        <!--<a-form-item v-if='bankCard.cardtype!=1' v-bind="formItemLayout" label="有效期">
          <a-date-picker placeholder="请选择有效期" @change="dateChange" v-decorator="[
                      'expiryDate',
                      {rules: [{ required: true, message: '请选择有效期' }]}
                    ]" />
        </a-form-item>-->
        <a-form-item v-if='bankCard.cardtype!=1' v-bind="formItemLayout" label="有效期">
          <a-month-picker placeholder="请选择有效期" format="YYYY-MM" @change="dateChange" v-decorator="[
                      'expiryDate',
                      {rules: [{ required: true, message: '请选择有效期' }]}
                    ]" />
        </a-form-item>
      </div>

      <a-form-item v-bind="formItemLayout" label="预留手机号">
        <div>
          <a-input placeholder="请输入银行预留手机号码" v-decorator="[
                        'phone',
                        {
                            rules: [{
                            required: true, message: '请输入银行预留手机号码',
                            },{validator: validateCode}],validateTrigger: 'blur'
                        }
                        ]" />
          <!-- <a-button v-if="issend" type="primary" @click="getCode">获取短信验证码</a-button>
          <a-button v-if="!issend" disabled type="primary">{{ count }}s后可再次发送</a-button>-->
        </div>
      </a-form-item>

      <a-row>
        <a-col :sm="{ span:5 }"></a-col>
        <a-col style="margin-bottom:30px;" :xs="{ span : 24 }" :sm="{ span:10,offset:1 }">
          <a-checkbox @change="onChange2">我已阅读并同意 <a href="">《快捷支付服务协议》</a> </a-checkbox>
        </a-col>
      </a-row>
      <a-row>
        <a-col :sm="{ span:5 }"></a-col>
        <a-col style="margin-bottom:30px;" :xs="{ span : 24 }" :sm="{ span:10,offset:1 }">
          <a-button :disabled="ischeck" type="primary" html-type="submit">下一步</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>

  import AForm from "ant-design-vue/es/form/Form";
  import ATabs from "ant-design-vue/es/tabs";
  import GlobalFooter from "../../../layouts/GlobalFooter";
  import AFormItem from "ant-design-vue/es/form/FormItem";
  import AInput from "ant-design-vue/es/input/Input";
  import AIcon from "ant-design-vue/es/icon";
  import AInputGroup from "ant-design-vue/es/input/Group";
  import AButton from "ant-design-vue/es/button/button";
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
  import AAlert from "ant-design-vue/es/alert/index";
  import pick from "lodash.pick";
  import api from "@/common/api";
  import { get, post } from "@/common/api";
  import moment from "moment";
  import { type } from "os";
  const dateFormat = "YYYY-MM-DD";
  const ATabPane = ATabs.TabPane;

  export default {
    name: "Login",
    components: {
      AAlert,
      ACheckbox,
      ACol,
      ARow,
      AButton,
      AInputGroup,
      AIcon,
      AInput,
      AFormItem,
      GlobalFooter,
      ATabPane,
      ATabs,
      AForm
    },
    data() {
      return {
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12, offset: 1 },
            md: { span: 10, offset: 1 }
          }
        },
        options: [],
        bankBranchoptions: [
        ],
        bankBranchList: [],
        ischeck: true,
        bankCard: this.$route.params.bankCard,
        banklocation: [],
        form: this.$form.createForm(this),
        bankCardVO: {
          cardNo: this.$route.params.cardNo.cardNo,
          bankCode: "",
          mobileNo: "",
          bankName: this.$route.params.bankCard.bankname,
          cvv: "",
          swimTime: "",
          province: "",
          city: "",
          bankBranchName: "",
          cardType: ""
        },
        bankname: this.$route.params.bankCard.bankname,
        isSubmit : true
      };
    },
    watch: {},
    computed: {},
    mounted() {
      this.getbankArea()
    },
    methods: {
      // 获取开户银行地址
      getbankArea() {
        if (this.banklocation) {
          console.log("开户行:", this.bankname);
          let data = {
            bankCode: this.bankname
          };
          api.getBankArea(
            data,
            res => {
              console.log("res", res);
              if (res.code == "OK") {
                this.options = res.list;
              } else {
                console.log(res);
              }
            },
            err => {
              console.log(err);
            }
          );
        } else {
          console.log("开户行为空", selvalue);
        }
      },
      // 开户地址失去焦点
      addressBlur() {
        // console.log("开户行地址：", this.banklocation);
        if (this.banklocation) {
          let data = {
            bankCode: this.bankname,
            province: this.banklocation[0],
            city: this.banklocation[1],
            bankName: ""
          };
          api.getBankBranch(
            data,
            res => {
              // console.log("res", res);
              if (res.code == "OK") {
                this.bankBranchoptions = res.list;
                this.bankBranchList = res.list;
              } else {
                // console.log(res);
              }
            },
            err => {
              console.log(err);
            }
          );
        } else {
          console.log("开户行地址为空");
        }
      },
      handleSearch(value) {
        // console.log(value)
        if (escape(value).indexOf("%u") < 0) {
          let keywords = value;
          var newList = []
          this.bankBranchoptions.forEach(item => {
            if (item.label.indexOf(keywords) != -1) {
              newList.push(item)
            }
          })
          this.bankBranchoptions = newList
        } else {
          this.bankBranchoptions = this.bankBranchList
        }
      },
      handleChange(value) {
        console.log(value);
      },
      dateChange(date, dateString) {
        console.log("dateString", dateString);
        this.expiryDate = this.bankCardVO.swimTime = dateString;
      },
      handleSubmit(e) {
        if(!this.isSubmit){
          console.log("提交按钮被重复点击！");
          return ;
        }
        let mainThis = this;
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            this.bankCardVO.mobileNo = values.phone;
            this.bankCardVO.cvv = values.cvv;
            this.visible = true;
            let actionUrl = "/binding/bankCard/insert/debitCard";
            this.bankCardVO.cardType = "D"
            if (this.bankCard.cardtype != 1) {
              actionUrl = "/binding/bankCard/insert/creditCard";
              this.bankCardVO.cardType = "C"
            }
            mainThis.isSubmit = false;
            this.$axios.post(actionUrl, this.bankCardVO).then(res => {
              console.log("res---",res);
              if(res.data.code == "OK"){
                //判断是否需要手机号验证
                if(res.data.data.sms){
                  let temp = this.bankCardVO.mobileNo;
                  this.$router.push({ 
                    name: "银行卡验证码", 
                    params: { 
                      mobileNo: temp.replace(temp.substring(3, 7), "****"),
                      accountNo: res.data.data.accountNo
                    } 
                  });
                }else{
                  this.$router.push({ path: "/per/bankadd/addbankres", query: { isok: 'true' } });
                }
              }else{
                alert("绑卡失败");
              }
              // let temp = this.bankCardVO.mobileNo;
              // this.$router.push({ 
              //   name: "银行卡验证码", 
              //   params: { 
              //     mobileNo: temp.replace(temp.substring(3, 7), "****"),
              //     accountNo: res.data.data.accountNo
              //   } 
              // });
            });

            // console.log("Received values of form: ", values);
            //   this.codeConfirm();
          }
        });
      },
      addressChange(value, selectedOptions) {
        console.log("addressChange", value);
        this.banklocation = value;
        this.bankaddress = value;
        // this.banklocation = selectedOptions.map(o => o.label);
        console.log("this.banklocation", this.banklocation);
        // if (selectedOptions.length == 1) {
        //   this.bankCard.province = {
        //     label: selectedOptions[0].label,
        //     value: selectedOptions[0].value
        //   };
        // } else if (selectedOptions.length == 2) {
        //   this.bankCard.city = {
        //     label: selectedOptions[1].label,
        //     value: selectedOptions[1].value
        //   };
        // } else if (selectedOptions.length == 3) {
        //   this.bankCard.district = {
        //     label: selectedOptions[2].label,
        //     value: selectedOptions[2].value
        //   };
        // }else {
        //   console.log(selectedOptions);
        // }

        this.bankCard.province = this.bankCardVO.province = this.banklocation[0];
        this.bankCard.city = this.bankCardVO.city = this.banklocation[1];
        // this.bankCard.district = this.banklocation[2];
      },
      handleVocationChange(val) {
        console.log("支行名称", val);
        this.bankCardVO.bankBranchName = val;
      },
      validateCode(rule, value, callback) {
        if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
          this.phone = false;
          callback("您输入的手机号格式有误！");
          return;
        } else {
          if (!value) {
            this.phone = false;
          } else {
            this.phone = true;
            this.phonevalue = value;
            console.log(this.phonevalue);
          }
          callback();
        }
      },
      onChange2(e) {
        console.log("changevalue2", e.target.checked);
        if (e.target.checked == true) {
          this.ischeck = false;
        } else {
          this.ischeck = true;
        }
      },
    }
  };
</script>

<style lang="less" scoped>
  /* @import '../../../common/index'; */

  span {
    cursor: pointer;
  }

  li {
    list-style: none;
  }

  .text-div {
    text-align: center;
  }

  .formGroupTitle {
    font-size: 20px;
    font-weight: 500;
    text-align: right;
  }
</style>
